<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p1_CSS的三种位置</title>
    <style>
        /*2.内部样式 对当前页面所有被选中的元素生效*/
        p{
            color: green;
        }
        div{color: blue;}
        h2{color: blue !important;}
    </style>
    <!--3.外部样式
     rel="stylesheet"必写属性 表示引入的是样式表
     href="url"被引入的外部CSS文件位置
     -->
    <link rel="stylesheet" href="01.css">
</head>
<body>
<!--1.行内样式 加在当前行 只对当前行元素生效-->
<h4 style="color:red; background-color: yellow">我是标题1</h4>
<h4>我是标题2</h4>
<h4>我是标题3</h4>

<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>

<div>
    我是块级样式1
</div>
<div>
    我是块级样式2
</div>
<div>
    我是块级样式3
</div>
<div>
    我是块级样式4
</div>

<!--!important>优先级:行内样式>内部样式和外部样式优先级一样,后写的样式会把之前的样式覆盖掉>浏览器自带的样式-->
<h2 style="color: green">测试优先级</h2>
</body>
</html>